<template>
  <div>
    <el-tabs v-model="activeTab" class="blog-tabs">
      <el-tab-pane label="博客列表" name="list">
        <div class="blog-list">
          <el-input
              v-model="searchQuery"
              placeholder="搜索博客"
              @input="searchBlogs"
              class="search-input"
              prefix-icon="el-icon-search"
          ></el-input>
          <el-row :gutter="20">
            <el-col :span="8" v-for="blog in tableData" :key="blog.id">
              <el-card class="blog-card">
                <div class="card-header">
                  <h3>{{ blog.title }}</h3>
                  <p>{{ blog.author }} | {{ blog.createTime }}</p>
                </div>
                <div class="card-body">
                  <p>{{ blog.content.slice(0, 100) }}...</p>
                </div>
                <div class="card-footer">
                  <el-button type="primary" @click="viewBlog(blog.id)">查看</el-button>
                  <el-button type="success" @click="likeBlog(blog.id)">点赞 ({{ blog.likeCount }})</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-pagination
              :current-page="pageRequest.pageNum"
              :page-size="pageRequest.pageSize"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
          />
        </div>
      </el-tab-pane>

      <el-tab-pane label="发布博客" name="publish">
        <el-form :model="newBlog" label-width="120px">
          <el-form-item label="标题" prop="title">
            <el-input v-model="newBlog.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="内容" prop="content">
            <el-input type="textarea" v-model="newBlog.content" placeholder="请输入内容" rows="6"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="publishBlog">发布博客</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="我的博客" name="myBlogs">
        <div class="my-blog-list">
          <el-row :gutter="20">
            <el-col :span="8" v-for="blog in myBlogs" :key="blog.id">
              <el-card class="blog-card">
                <div class="card-header">
                  <h3>{{ blog.title }}</h3>
                  <p>{{ blog.createTime }}</p>
                </div>
                <div class="card-footer">
                  <el-button type="danger" @click="deleteBlog(blog.id)">删除</el-button>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="showDialog" title="博客详情">
      <div v-if="selectedBlog">
        <h3>{{ selectedBlog.title }}</h3>
        <p>{{ selectedBlog.content }}</p>
        <div class="comment-section">
          <el-input v-model="comment" placeholder="添加评论" @keyup.enter="addComment" />
          <el-button type="primary" @click="addComment">发表评论</el-button>
          <div class="comments">
            <div v-for="comment in selectedBlog.comments" :key="comment.id" class="comment">
              <p>{{ comment.author }}: {{ comment.content }}</p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeTab: 'list',
      tableData: [], // 博客列表
      searchQuery: '', // 搜索框内容
      newBlog: {
        title: '',
        content: '',
      },
      myBlogs: [], // 当前用户的博客
      selectedBlog: null, // 当前选中的博客
      comment: '', // 评论内容
      pageRequest: {
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      showDialog: false, // 控制详情对话框显示
    };
  },
  mounted() {
    this.loadBlogs();
    this.loadMyBlogs();
  },
  methods: {
    // 获取博客列表
    loadBlogs() {
      this.request.post('/blog/page', this.pageRequest).then((res) => {
        if (res.code === '200') {
          this.tableData = res.data.list;
          this.total = res.data.total;
        }
      });
    },
    // 获取当前用户的博客
    loadMyBlogs() {
      this.request.get('/blog/my').then((res) => {
        if (res.code === '200') {
          this.myBlogs = res.data;
        }
      });
    },
    // 搜索博客
    searchBlogs() {
      this.pageRequest.q = { keywords: this.searchQuery };
      this.loadBlogs();
    },
    // 查看博客详情
    viewBlog(id) {
      this.request.get(`/blog/${id}`).then((res) => {
        if (res.code === '200') {
          this.selectedBlog = res.data;
          this.showDialog = true;
        }
      });
    },
    // 发布博客
    publishBlog() {
      if (this.newBlog.title && this.newBlog.content) {
        this.request.post('/blog/saveOrUpdate', this.newBlog).then((res) => {
          if (res.code === '200') {
            this.$message.success('博客发布成功');
            this.newBlog = { title: '', content: '' }; // 重置表单
            this.loadBlogs(); // 刷新博客列表
          } else {
            this.$message.error('发布失败');
          }
        });
      } else {
        this.$message.warning('请填写标题和内容');
      }
    },
    // 点赞博客
    likeBlog(id) {
      this.request.post(`/blog/${id}/like`).then((res) => {
        if (res.code === '200') {
          this.loadBlogs(); // 刷新博客列表
        }
      });
    },
    // 添加评论
    addComment() {
      if (this.comment.trim()) {
        this.request.post(`/blog/${this.selectedBlog.id}/comment`, { content: this.comment }).then((res) => {
          if (res.code === '200') {
            this.selectedBlog.comments.push({
              author: 'Current User', // 模拟评论者
              content: this.comment,
            });
            this.comment = ''; // 清空评论框
          }
        });
      }
    },
    // 删除博客
    deleteBlog(id) {
      this.request.delete(`/blog/${id}`).then((res) => {
        if (res.code === '200') {
          this.$message.success('博客删除成功');
          this.loadMyBlogs(); // 刷新我的博客列表
        }
      });
    },
    // 分页改变页面大小
    handleSizeChange(size) {
      this.pageRequest.pageSize = size;
      this.loadBlogs();
    },
    // 分页切换页面
    handleCurrentChange(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.loadBlogs();
    },
  },
};
</script>

<style scoped>
.blog-tabs {
  margin-bottom: 20px;
}

.blog-list {
  margin-top: 20px;
}

.blog-card {
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  margin-bottom: 20px;
}

.card-header {
  font-size: 1.2em;
}

.card-body {
  font-size: 1em;
}

.card-footer {
  display: flex;
  justify-content: space-between;
}

.comment-section {
  margin-top: 20px;
}

.comments {
  margin-top: 10px;
}

.comment {
  margin-bottom: 10px;
}
</style>
